<template>
	<view class="warp" >
		<view class="" v-if="!edithow">
			<view class="survery">
				<view class="title">
					{{title}}
				</view>
				<!-- <view class="intaduce">
					此次问卷调查。。
				</view> -->
				<view class="edit" @click="editfn">
					编辑标题
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="i_title">
					{{index+1}}.	{{item.titleName}}
					</view>
					<view class="po_list">
						<view class="po_item" v-for="(items,index) in item.optionsVOList" :key="index">
							<view class="index">
								{{String.fromCharCode(index +'A'.charCodeAt() )}}.
							</view>
							<view class="value">
								{{items.optionsName}}
							</view>
							
						</view>
					</view>
					<view class="delete" @click="deleteitem(item)">
					  删除
					</view>
				</view>
			</view>
			<view class="addquestion">
				<view class="button" @click="addquestion">
					<view class="icon">
						<uni-icons type="plusempty" size="30"></uni-icons>
					</view>
					<view class="text" >
						添加题目
					</view>
				</view>
			</view>
		</view>
		<view class="addinfo" v-if="edithow">
			<view class="title">
				<span style="margin-bottom: 10rpx;display: block;">标题</span>
				<input v-model="form.titleName" style="border: 2rpx solid #cecece;height: 80rpx;line-height: 80rpx;" type="text" />
			</view>
			<view class="checklist">
				<view class=" " style="border-bottom: 2rpx solid #cecece;padding: 10rpx;">
			       选项
				</view>
				<view class="list">
					
					<view class="list_item" v-for="(item,index) in problemoptions" :key="index">
						<view class="title">
							<view class="index">
								{{String.fromCharCode(index +'A'.charCodeAt() )}}.
							</view>
							<view class="value">
								<textarea v-model="item.optionsName"  style="background-color: #fff;padding: 10rpx;height:150rpx;width: 550rpx;" :auto-height="true" placeholder="请输内容"/>
							</view>
						</view>
						<view class="icons" @click="deletefn(index)">
							<uni-icons type="closeempty" size="40rpx" color="#656565"></uni-icons>
						</view>
					</view>
					<view style="display: flex;align-items: center;" class="addicon" @click="additem">
						
						<uni-icons type="plus" size="50rpx" color="#00a0e9"></uni-icons>
					     <view class="" style="color: #00a0e9;">
					     	添加选项
					     </view>
					</view>
					
				</view>
			</view>
			<view class="button">
				<view class="litsubmit" @click="litsubmit">
					确认
				</view>
				<view class="closefn" @click="closefn">
					返回
				</view>
			</view>
		</view>
		<!-- <view class="submit" v-if="!edithow">
			提交问卷
		</view> -->
		<uni-popup ref="popup" type="center"   background-color="#fff">
			<view class="" style="background-color: #fff;border-radius: 10rpx;">
				
				 <view class="titles">
				修改问卷标题
				 </view>
				<view class="form">
					<view class="" style="display: flex;align-items: center;">
					 <span style="margin-right: 15rpx;">问卷标题:</span>
						<input v-model="queryform.surveyName" type="text" placeholder="请输入问卷标题"></input>
					</view>
					
					 
				</view>
				<view class="buttons">
					<view class="left" @click="cancel">
					取消
					</view>
					<view class="right" @click="submit">
						确定
				</view>
				</view>
				</view>
		</uni-popup>
		<uni-popup ref="popdelete" type="dialog">
			<uni-popup-dialog :before-close="true" type="input" :title="$L('提示')" :content="$L('是否确认删除')" :duration="2000"
				@confirm="confirmLogins" @close="canscle">
			</uni-popup-dialog>
		</uni-popup>
	</view>
	
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
			
		},
		data() {
			return {
				id:'',
				title:'',
				edithow:false,
				problemoptions:[],
				problemtitle:'',
				form:{
					tSurveyId:'',//问卷id
					titleName:'',//题目名称
					optionsList:[],//选项集合
				},
				list:[],//问卷题目
				iteminfo:{},
				queryform:{
					surveyId:'',
					surveyName:''
				},
				
			};
		},
		onLoad(e) {
			this.id=e.id
			this.getsurveyinfo()
		},
		methods:{
			// 获取问卷
			getsurveyinfo(){
				this.$request({
					url:'v3/survey/front/title/detail?tSurveyId='+this.id,
					method:"GET"
				}).then(res=>{
					if(res.state==200){
						this.title=res.data.surveyName
						this.list=res.data.titleList
						this.queryform.surveyId=res.data.surveyId
					   this.queryform.surveyName=res.data.surveyName
					}
				})
			},
			// 添加问卷
			addquestion(){
				this.edithow=true
			},
			closefn(){
				this.edithow=false
				this.form={
					
				}
				
			},
			// 修改标题
			editfn(){
					this.$refs.popup.open()
			},
			 // q确认提交
			 // 创建问卷
			 submit(){
			 	
			 	if(this.queryform.surveyName){
			 	
			 		this.$request({
			 			url:'v3/survey/front/survey/update',
			 			method:'POST',
			 			header:{
			 			  'Content-Type': 'application/json'
			 			},
			 			data:this.queryform
			 		}).then(res=>{
			 			if(res.state==200){
			 				uni.showToast({
			 					title:'修改成功',
								icon:"none"
			 				})
			 				this.getsurveyinfo()
			 				// 清空表单
			 				this.queryform.surveyName=null
							this.queryform.surveyId=null
			 				this.$refs.popup.close()
			 			}
			 		})
			 	}else{
			 		uni.showToast({
			 			title:'请填写问卷标题',
			 			icon:'none'
			 		})
			 	}
			 },
			cancel(){
			this.$refs.popup.close()
			},
			// 添加选项
			additem(){
				this.problemoptions.push({optionsName:null})
				// this.problemoptions.push({optionChar:String.fromCharCode(this.problemoptions.length +'A'.charCodeAt()),optionsName:null})
			    // this.range.push({text:String.fromCharCode(this.range.length +'A'.charCodeAt()),value:this.range.length})
			},
			deletefn(index){
			this.problemoptions.splice(index,1)
			// this.range.splice(index,1)
			},
			// 删除
			deleteitem(val){
				this.$refs.popdelete.open()
				this.iteminfo=val
				
			},
			// 取消
			canscle(){
				this.$refs.popdelete.close()
			},
			// 确认删除
			confirmLogins(){
				this.$request({
					url:'v3/survey/front/title/delete?titleId='+this.iteminfo.titleId,
				    method:"GET"
				}).then(res=>{
					if(res.state==200){
						this.getsurveyinfo()
						this.$refs.popdelete.close()
					}
				})
			},
			// 提交选项
			litsubmit(){
				this.form.tSurveyId=this.id
				this.form.optionsList=this.problemoptions
				this.$request({
					url:'v3/survey/front/title/add',
					method:'POST',
					header:{
					  'Content-Type': 'application/json'
					},
					data:this.form
				}).then(res=>{
					if(res.state==200){
						uni.showToast({
							title:'添加成功',
							icon:'none'
						})
						this.form={}
						this.problemoptions=[]
						this.edithow=false
						this.getsurveyinfo()
					}
				})
				console.log(this.problemoptions);
				
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
	.warp{
		overflow: hidden;
		background: #F5F5F5;
		.survery{
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			border-top: 2rpx solid #cecece;
			position: relative;
			.title{
				text-align: center;
				padding: 20rpx;
				font-size: 39rpx;
				color: #feb858;
			}
			.intaduce{
				text-align: center;
				padding: 20rpx;
				font-size: 24rpx;
				color: #cecece;
			}
			.edit{
				font-size: 24rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				color: #feb858;
			}
		}
		.titles{
			padding-top: 10rpx;
			text-align: center;
			font-size: 32rpx;
		}
		.form{
			padding: 80rpx;
		}
		.buttons{
			width: 100%;
			height: 80rpx;
			border-top: 2rpx solid #cecece;
			display: flex;
			.left{
				width: 50%;
				height: 80rpx;
				border-right: 2rpx solid #cecece;
				text-align: center;
				line-height: 80rpx;
			}
			.right{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
			}
			
		}
		
		// 添加按钮
		.addquestion{
			width: 100%;
		    margin-top: 30rpx;
			margin-left: 10%;
			.button{
				display: flex;
				align-items: center;
			    
				background-color: #fff;
				width: 80%;
				height: 80rpx;
				padding-left: 26%;
				
			}
		}
		.submit{
			position: fixed;
			bottom: 10rpx;
			left: 225rpx;
			width: 300rpx;
			height: 80rpx;
			background-color: #feb858;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 40rpx;
			
		}
		// 
		.list{
			background-color: #fff;
			margin-top: 10rpx;
			.item{
				position: relative;
				border-bottom: 2rpx solid #cecece;
				padding: 20rpx;
				.i_title{
					color: #feb858;
					padding: 10rpx;
					// border-bottom: 2rpx solid #e5e5e5;
				}
				.po_list{
					padding: 10rpx;
					.po_item{
						display: flex;
						align-items: center;
						padding: 10rpx;
						.index{
							margin-right: 10rpx;
						}
						 
					}
				}
				.delete{
					position: absolute;
					right: 10rpx;
					bottom: 10rpx;
					color: red;
				}
			}
		}
		// 添加标题
		.addinfo{
			background-color: #fff;
			.title{
				background-color: #fff;
				padding: 20rpx;
			}
			.checklist{
				padding: 20rpx;
				background-color: #fff;
				.list{
					
					position: relative;
					margin-top: 10rpx;
					.list_item{
						border-bottom: 2rpx solid #e5e5e5;
						position: relative;
						margin-bottom: 20rpx;
					
						.title{
							
								
								display: flex;
								// justify-content: space-between;
								// align-items: center;
								.index{
									font-size: 36rpx;
									margin-right: 20rpx;
								}
								.value{
									
								}
								
						}
					.icons{
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						
					}
					}
					// .icon{
					// 	position: absolute;
					// 	right: 20rpx;
					// 	top: -50rpx;
					// }
					
				}
			}
			.button{
				width: 750rpx;
				padding-left: 225rpx;
				margin-top: 50rpx;
				.litsubmit{
					width: 300rpx;
					height: 80rpx;
					background-color: #feb858;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
				}
				.closefn{
					margin-top: 20rpx;
					width: 300rpx;
					height: 80rpx;
					background-color: #fff;
					border: 2rpx solid #282828;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
		
	}
</style>
